<template>
  <NavigationBar>
    <Row class="row-card" :gutter="16">


      <i-col span="6">
          <Card class="animate__animated animate__rotateInUpLeft" dis-hover :bordered="false">
            <!--分类-->
            <Card class="card-item">
              <div slot="title">
                <Row>
                  <i-col style="text-align: center" span="12">
                    <Tooltip content="分类" placement="top">
                      <Badge  type="info" :count="categoryLength">
                        <Avatar src="http://dd.ddandang.top/blog/images/classification.png" size="30" />
                      </Badge>
                    </Tooltip>
                  </i-col>
                  <i-col style="text-align: center" span="12">
                    <Tooltip content="刷新文章，获取全部文章！" placement="top">
                      <div @click="refresh">
                        <Avatar  src="http://dd.ddandang.top/blog/images/refresh.png" size="30" />
                      </div>
                    </Tooltip>
                  </i-col>
                </Row>

              </div>
              <List item-layout="vertical">
                <div  @click="categoryClick(index)" class="list-item" v-for="(item, index) in categoryList" :key="item.id">
                  <ListItem>
                    <ListItemMeta :avatar="item.image | image" :title="item.name" :description="item.description" />
                  </ListItem>
                  <Divider dashed />
                </div>
              </List>
            </Card>
            <!--分类-->
          </Card>
      </i-col>

      <!--文章内容-->
      <i-col span="11" :style="{minHeight: '1000px', textAlign: 'center'}">

        <Card class="animate__animated animate__zoomInDown article-div"  dis-hover :bordered="false">
          <Card icon="md-paw" v-for="(item, index) in articleList" :key="index" style="margin-top: 15px">
            <div @click="articleDetail(item.id)">
              <div slot="title">
                <Row>
                  <i-col span="8">
                    <Tag :color="$store.state.color[(Math.floor((Math.random()*10)+1))%7]" size="large">{{item.categories | categories}}</Tag>
                  </i-col>
                  <i-col span="8">
                    <div class="title">
                      {{item.title}}
                    </div>
                  </i-col>
                  <i-col span="8">
                    <Avatar v-if="item.topping===true" src="http://dd.ddandang.top/blog/images/heat.png" size="45" />
                  </i-col>
                </Row>
              </div>
              <div class="main">
                <div>
                  <Row>
                    <i-col span="8">
                      <Avatar v-if="item.image !== null" :src="item.image" size="80" />
                      <Avatar v-else src="http://dd.ddandang.top/blog/images/images.jpg" size="80" />
                    </i-col>
                    <i-col span="16">
                      <p>{{item.description}}</p>
                    </i-col>
                  </Row>
                </div>
                <div :style="{marginTop: '15px'}">
                  <Row>
                    <i-col span="8">
                      <p class="time">发布时间：{{item.gmtCreate | formatTime}}</p>
                      <p class="time">更新时间：{{item.gmtModified | formatTime}}</p>
                    </i-col>

                    <i-col span="12">
                      <Icon type="ios-thumbs-up-outline" />
                      {{item.hits}}
                      <Icon type="ios-chatbubbles-outline" />
                      {{item.commentAmount}}
                    </i-col>
                  </Row>
                </div>
              </div>
            </div>
          </Card>
        </Card>

        <!--分页-->
        <Page :current="pageNo" v-if="total>pageSize" @on-change="changeSize" :page-size="pageSize" :total="total" show-total style="margin-bottom: 50px"/>
      </i-col>
      <!--文章内容-->
      <i-col span="7">
        <Affix :offset-top="50">

          <Card dis-hover class="animate__animated animate__rotateIn" :bordered="false">

            <!--个人信息-->
            <PersonalInfo/>
            <!--个人信息-->

            <!--标签-->
            <Card class="card-item animate__animated animate__zoomInDown">
              <div slot="title">
                <Row>
                  <i-col style="text-align: center" span="12">
                    <Tooltip content="标签" placement="top">
                      <Badge  type="info" :count="tagsList.length">
                        <Avatar src="http://dd.ddandang.top/blog/images/tags.png" size="30" />
                      </Badge>
                    </Tooltip>
                  </i-col>
                  <i-col style="text-align: center" span="12">
                    <Tooltip content="刷新文章，获取全部文章！" placement="top">
                      <div @click="refresh">
                        <Avatar  src="http://dd.ddandang.top/blog/images/refresh.png" size="30" />
                      </div>
                    </Tooltip>
                  </i-col>
                </Row>
              </div>
              <div class="tags-div">
                <Row class="tags-item" v-for="n in tagsLength" :key="n">
                  <i-col span="8" v-for="(item, index) in tagsList.slice((n-1) * 3, n * 3 )" :key="index">
                    <div >
                      <Tooltip :content="item.description" placement="left">
                        <Badge :count="item.articleAmount" type="success">
                            <Tag :color="$store.state.color[(n * (index + 1) * 3)%7]">
                              <div @click="tagsClick(item.id, item.articleAmount)">
                                {{item.name}}
                               </div>
                            </Tag>
                        </Badge>
                      </Tooltip>
                    </div>
                  </i-col>

                </Row>
              </div>
            </Card>
            <!--标签-->

          </Card>
        </Affix>
      </i-col>
    </Row>
  </NavigationBar>
</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import {allTags} from "@/network/classification";
  import {listIndexVo, listCategoryVo} from "@/network";
  import moment from 'moment'
  import PersonalInfo from "@/components/common/PersonalInfo";

  export default {
    name: "Index",
    data() {
      return {
        //文章的分页 默认一页5个数据
        pageNo: 1,
        pageSize: 5,
        currentId: {
          //当前点击的分类Id 0表示未点击
          currentCategoryId: 0,
          //当前点击的标签Id 0表示未点击
          currentTagsId: 0
        },
        //总文章数
        total: 0,
        //文章数据
        articleList: [],
        tagsLength: 0,
        //标签数据
        tagsList: [],
        categoryList: [],
        categoryLength: 0,
      }
    },
    components: {
      NavigationBar,
      PersonalInfo
    },
    mounted() {
      //获取当前的页码
      this.pageNo = this.$store.state.pageNo;
      this.currentId = this.$store.state.currentId;
      //获取全部的标签
      this.allTags();
      //分页获取文章的信息
      this.getListIndexVo();
      //获取全部分类信息
      this.getListCategoryVo()
    },
    methods: {
      //获取全部标签
      allTags() {
        allTags().then(res => {
          if(res.code === 2000) {
            this.tagsList = res.data.tagsList;
            this.tagsLength = Math.ceil(res.data.tagsList.length/3);
          }
        })
      },
      //分页获取展示文章的全部信息信息
      getListIndexVo() {
        listIndexVo(this.pageNo, this.pageSize,
            this.currentId.currentCategoryId, this.currentId.currentTagsId).then(res => {
          if(res.code === 2000) {
            this.total = res.data.total;
            this.articleList = res.data.listIndexVo;
          }
        }).catch(() => {
        })
      },
      //获取全部分类
      getListCategoryVo() {
        listCategoryVo().then(res => {
          if(res.code === 2000) {
            this.categoryList = res.data.categoriesList;
            this.categoryLength = res.data.categoriesList.length;
          }
        }).catch(() => {
        })
      },
      //改变页码
      changeSize(pageNo) {
        //当前页码与点击的不同再进行请求数据
        if(this.pageNo !== pageNo) {
          this.pageNo = pageNo;
          this.getListIndexVo();
          //将当前页码保存到vueX中
          this.$store.commit("setPageNo", pageNo);
        }
      },
      //点击列表从何获取该分类中的文章
      categoryClick(index) {
        //点击分类中文章的数量
        let articleAmount = this.categoryList[index].articleAmount;
        if(articleAmount === 0) {
          this.$Message.error({
            background: true,
            content: '该分类没有文章！'
          })
          return;
        }
        //分类的id
        this.currentId.currentCategoryId = this.categoryList[index].id;
        this.currentId.currentTagsId = 0;
        this.$store.commit("setIndexPageInfo", this.currentId);
        this.pageNo = 1;
        this.getListIndexVo();
      },
      //标签点击 tagsId 当前点击的标签Id count 该标签中文章的总数
      tagsClick(tagsId, count) {
        if(count === 0) {
          this.$Message.error({
            background: true,
            content: '该标签没有文章！'
          })
          return;
        }
        this.currentId.currentCategoryId = 0;
        this.currentId.currentTagsId = tagsId;
        this.$store.commit("setIndexPageInfo", this.currentId);
        this.pageNo = 1;
        this.getListIndexVo();
      },
      //刷新文章
      refresh() {
        this.currentId.currentCategoryId = 0;
        this.currentId.currentTagsId = 0;
        this.pageNo = 1;
        this.$store.commit("setPageNo", this.pageNo);
        this.$store.commit("setIndexPageInfo", this.currentId);
        this.getListIndexVo();
      },
      //文章详细
      articleDetail(articleId) {
        this.$store.commit("setArticleDetailId", articleId);
        this.$router.push({path: '/articleDetail'})
      }
    },
    computed: {
    },
    filters: {
      formatTime: function (date) {
        return moment(date).format("YYYY年MM月DD日");
      },
      //如果分类图片不存在则设置一个默认的图片
      image(image) {
        if(image === null || image === '') {
          return 'http://dd.ddandang.top/blog/images/images.jpg'
        } else {
          return image;
        }
      },
      categories(categories) {
        if(categories === '' || categories === null) {
          return "该文章未分类";
        }else {
          return categories;
        }
      }
    }
  }
</script>

<style scoped>

  .tags-item {
    text-align: center;
    margin-top: 15px;
  }
  .tags-item :hover {
    cursor: default;
  }
  .card-item {
    margin-top: 15px;
  }
  .row-card{
    margin-top: 20px;
  }
  .list-item {
    margin-top: 15px;
  }
  .list-item  :hover {
    cursor: default;
  }
  .article-div {
    text-align: center;
  }
  .title {
    font-weight: bold;
    font-family: 'Lantinghei SC',serif;
    font-size: 25px;
    line-height: 50px;
    height: 40px;
  }
  .time {
    font-family: ' Xingkai SC',serif;
  }

</style>
